<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
            padding: 0;
        }
        .one{
            width: 100%;
            height: 40px;
            background: #333333;
            font-size: 10px;
        }
        .one .one_1{
            width: 100%;
            height: 40px;
            padding: 15px 0px 0px 150px;
        }
        .one .one_1 li{
            color: #CCCCCC;
            float: left;
            border-left: 1px solid #6c6c6c;
            padding: 0px 10px 0px 10px;
        }
        #l1{border-left: 1px solid #333333;}
        .one ul li:hover{color:white;}
        .one ul li:hover{cursor:pointer;}
        #l2{
            border-left: 1px solid #333333;
            padding:0px 0px 0px 250px;
        }
        .one img{
            width: 120px;
            height: 41px;
            float: right;
            margin: 0px 160px 0px 0px;
        }


        .two{
            width: 1214px;
            height: 100px;
            margin: 0 auto;
        }
        .two img{
            width: 60px;
            height: 60px;
            padding: 20px 0 0 0;
        }
        .two ul li{
            float: left;
            padding: 0 0 0 20px;
        }
        .two .two_1{
            position: relative;
            left: 200px;
            bottom: 60px;
        }
        .two .two_2{
            width: 280px;
            height: 60px;
            border-left: 1px solid #CCCCCC;
            border-top: 1px solid #CCCCCC;
            border-bottom: 1px solid #CCCCCC;
            position: relative;
            left: 932px;
            bottom: 80px;
        }
        .two .two_2 img{
            display: block;
            position: relative;
            bottom: 40px;
            left: 220px;
        }
        .two .two_2 div{
            float: right;
            font-size: 13px;
            color: black;
            margin: 2px 65px 0 0;
            background: #CCCCCC;
        }
        .two .two_2 div .class_2{
            background: white;
        }
        .two ul li:hover{
            color: red;
        }
        .two .two_2 div .class_1:hover{
            background: orange;
        }
        .two .two_2 div .class_3:hover{
            background: orange;
        }


        .three{
            width: 1214px;
            height: 440px;
            margin: 0 auto;
        }
        .three .three_1{
            width: 250px;
            height: 440px;
            border: 1px solid white;
            background: pink;
        }
        .three .three_1 ul{
            margin: -30px 0 0 0;
        }
        .three .three_1 ul li{
            font-size: 20px;
            margin: 9px 0 0 0;
        }
        .three .three_1 ul li #span_1{
            color: pink;
        }
        .three .three_1 ul li .span_2{
            float: right;
            margin: 0 10px 0 0;
            font-weight: bold;
        }

        .three_2{
            width: 961px;
            height: 440px;
            position: relative;
            bottom: 442px;
            left: 251px;
        }
        .three_2 img{
            width: 100%;
            height: 100%;
        }
        .three .three_1 ul .span_1:hover{
            background: orange;
        }
        .three .three_1 ul .span_2:hover{
            background: orange;
        }

        .four{
            width: 1214px;
            height: 176px;
            margin: 20px auto;
        }

        .four .four_1{
            width: 253px;
            height: 176px;
            background: rgb(95,87,80);

        }
        .four .four_1 div{
            width: 82px;
            height: 86px;
            float: left;
            border: 1px solid rgb(102,94,87);
            border-radius: 20%;
            text-align: center;
            line-height: 86px;
            color: rgb(204,202,200);
        }
        
        .four .four_2{
            width: 300px;
            height: 176px;
            position: relative;
            bottom: 176px;
            left: 274px;
        }
        .four .four_2 img{
            width: 100%;
            height: 100%;
        }

        .four .four_3{
            width: 300px;
            height: 176px;
            position: relative;
            bottom: 352px;
            left: 595px;
        }
        .four .four_3 img{
            width: 100%;
            height: 100%;
        }

        .four .four_4{
            width: 300px;
            height: 176px;
            position: relative;
            bottom: 528px;
            left: 915px;
        }
        .four .four_4 img{
            width: 100%;
            height: 100%;
        }
        .four .four_1 div:hover{
            color: white;
        }


        .five{
            width: 85px;
            height: 400px;
            border: 1px solid #EDEDED;
            position: fixed;
            bottom: 200px;
            right: 0;
        }
        .five div{
            text-align: center;
            width: 85px;
            height: 80px;
        }
        .five div img{
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
<div class="one">
    <div>
        <img src="111.png"
             onmouseover="this.src='222.jpg';"
                onmouseout="this.src='111.png';" height="200" width="200">
    </div>

    <ul type="none" class="one_1">
        <li id="l1">小米商城</li>
        <li>MIUI</li>
        <li>loT</li>
        <li>云服务</li>
        <li>金融</li>
        <li>有品</li>
        <li>小爱开发平台</li>
        <li>企业团购</li>
        <li>资质证照</li>
        <li>协议规则</li>
        <li>下载app</li>
        <li>Select Location</li>
        <li id="l2">登录</li>
        <li>注册</li>
        <li>消息通知</li>
    </ul>
</div>
<div class="two">
    <div>
        <img src="333.png"
            onmouseover="this.src='555.png';"
            onmouseout="this.src='333.png';" height="200" width="200">
    </div>
    <div class="two_1">
        <ul type="none">
        <li>小米手机</li>
        <li>Redmi红米</li>
        <li>电视</li>
        <li>笔记本</li>
        <li>家电</li>
        <li>路由器</li>
        <li>智能硬件</li>
        <li>服务</li>
        <li>社区</li>
    </ul>
    </div>
    <div class="two_2">
        <div><span class="class_1">Redmi Note 8 Pro</span><span class="class_2">&nbsp;&nbsp;</span><span class="class_3">小米9</span></div>
        <img src="444.png" alt="">
    </div>
</div>
<div class="three">
    <div class="three_1">
        <ul type="none">
            <li><span id="span_1">手</span><span class="span_1">手机 电话卡<span class="span_2">></span></span></li>
            <li><span class="span_1">电视 盒子<span class="span_2">></span></span></li>
            <li><span class="span_1">笔记本 平板<span class="span_2">></span></span></li>
            <li><span class="span_1">家电 插电板<span class="span_2">></span></span></li>
            <li><span class="span_1">出行 穿戴<span class="span_2">></span></span></li>
            <li><span class="span_1">智能 路由器<span class="span_2">></span></span></li>
            <li><span class="span_1">电源 配件<span class="span_2">></span></span></li>
            <li><span class="span_1">健康 儿童<span class="span_2">></span></span></li>
            <li><span class="span_1">耳机 音箱<span class="span_2">></span></span></li>
            <li><span class="span_1">生活 箱包<span class="span_2">></span></span></li>
        </ul>
    </div>
    <div class="three_2">
        <img src="666.png" alt="">
    </div>
</div>
<div class="four">
    <div class="four_1">
        <div>
            小米秒杀
        </div>
        <div>
            企业团购
        </div>
        <div>
            F码通道
        </div>
        <div>
            米粉卡
        </div>
        <div>
            以旧换新
        </div>
        <div>
            话费充值
        </div>
    </div>
    <div class="four_2">
        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/37d52be5170e1b25d30ff44db4b0791c.jpg?w=632&h=340" alt="">
    </div>
    <div class="four_3">
        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e7b51b721c3319e9c2916cc41cd9c695.jpg?w=632&h=340" alt="">
    </div>
    <div class="four_4">
        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/816a66edef10673b4768128b41804cae.jpg?w=632&h=340" alt="">
    </div>
</div>
<div class="five">
    <div>
        <img src="441.png"
            onmouseover="this.src='442.png';"
            onmouseout="this.src='441.png';" height="200" width="200">
    </div>
    <div>
        <img src="451.png"
            onmouseover="this.src='452.png';"
            onmouseout="this.src='451.png';" height="200" width="200">
    </div>
    <div>
        <img src="461.png"
            onmouseover="this.src='462.png';"
            onmouseout="this.src='461.png';" height="200" width="200">
    </div>
    <div>
        <img src="471.png"
            onmouseover="this.src='472.png';"
            onmouseout="this.src='471.png';" height="200" width="200">
    </div>
    <div>
        <img src="481.png"
            onmouseover="this.src='482.png';"
            onmouseout="this.src='481.png';" height="200" width="200">
    </div>
</div>
</body>
</html>